<template>
  <div class="nothing-container">
    <div class="nothing-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
    </div>
    <h3 class="nothing-title">{{ title }}</h3>
    <p class="nothing-message">{{ message }}</p>
    <div class="nothing-action" v-if="showActionButton">
      <button class="action-button" @click="handleAction">{{ actionText }}</button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: '暂无搜索结果'
  },
  message: {
    type: String,
    default: '很抱歉，未能找到匹配的结果，请尝试其他关键词'
  },
  showActionButton: {
    type: Boolean,
    default: false
  },
  actionText: {
    type: String,
    default: '返回首页'
  }
});

const emit = defineEmits(['action']);

const handleAction = () => {
  emit('action');
};
</script>

<style scoped>
.nothing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  min-height: 100%;
}

.nothing-icon {
  color: #ccc;
  margin-bottom: 20px;
}

.nothing-title {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.nothing-message {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  max-width: 300px;
}

.nothing-action {
  margin-top: 10px;
}

.action-button {
  padding: 8px 20px;
  background-color: #4a6cf7;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.action-button:hover {
  background-color: #3a5bd9;
}
</style>